window.addEventListener('load', function() {
    // 首页轮播图部分
    (function() {
        var focus = this.document.querySelector('.focus');
        var ul = this.document.querySelector('.focus_ul');
        var lis = ul.children;
        var b = this.document.querySelector('.focus_b');
        var b_ul = b.children[0];
        var f = this.document.querySelector('.focus_f');
        var r = this.document.querySelector('.focus_r');
        var focusWidth = focus.offsetWidth;
        // 1. 显示隐藏左右按钮
        focus.addEventListener('mouseenter', function() {
            f.style.display = 'block';
            r.style.display = 'block';
            // 当鼠标进过时停止定时器
            clearInterval(timer);
            timer = null; //清除定时器
        })
        focus.addEventListener('mouseleave', function() {
            f.style.display = 'none';
            r.style.display = 'none';
            timer = setInterval(function() {
                // element.click() 手动点击事件
                r.click();
            }, 3000);
        });
        //2. 添加小圆点
        for (var i = 0; i < lis.length; i++) {
            // 3. 创建节点
            var li = this.document.createElement('li');
            // 记录当前小圆圈的索引号，通过自定义属性来做
            li.setAttribute('index', i);
            // 在父节点最后添加子节点
            b_ul.appendChild(li);
            // 4. 我们可以直接在生成小圆圈的同时直接绑定点击事件
            li.addEventListener('click', function() {
                // 排他思想
                for (var i = 0; i < b_ul.children.length; i++) {
                    b_ul.children[i].className = '';
                }
                this.className = 'border';

                // 5. 点击小圆圈 移动图片
                // 核心算法：被点击的小圆圈的索引号乘以照片的宽度等于ul要移动的距离
                // 当我们点击了某个小li 就拿到当前小li的索引号
                var index = this.getAttribute('index');
                // 当我们点击了某个小li 就要把这个li的索引号给num
                num = index;
                // 当我们点击了某个小li 就要把这个li的索引号给circle
                circle = index;
                // 调用动画函数
                animate(ul, -index * focusWidth);
            })
        };
        // 给ul里面的第一个小li添加border类
        b_ul.children[0].className = 'border';
        // 6. 深克隆第一张图片 放在最后面
        var first = lis[0].cloneNode(true);
        ul.appendChild(first);
        // 7. 点击右按钮 移动照片
        // 核心算法：声明一个变量，点击一次就自增1，让这个变量乘以图片的宽度就是ul的滚动距离
        // num控制图片播放
        var num = 0;
        // circle控制小圆圈播放
        var circle = 0;
        // flag 节流阀
        var flag = true;
        r.addEventListener('click', function() {
            if (flag) {
                flag = false; //关闭节流阀
                // 如果走到了最后复制的一张图片，此时 我们的ul 要快速复原 left 改为 0
                if (num == lis.length - 1) {
                    ul.style.left = 0 + 'px';
                    num = 0;
                }
                num++;
                animate(ul, -num * focusWidth, function() {
                    // 当动画执行完毕后 打开节流阀
                    flag = true;
                });
                // 8. 点击右侧按钮，小圆圈跟随一起变化 可以再声明一个变量控制小圆圈的播放
                circle++;
                // 如果circle ==7 说明走到最后我们克隆的这张照片了  我们就复原
                if (circle == b_ul.children.length) {
                    circle = 0;
                }
                // 调用排他思想函数
                circleChange();
            }
        });
        // 9. 左侧按钮做法
        f.addEventListener('click', function() {
            if (flag) {
                flag = false; //关闭节流阀
                if (num == 0) {
                    num = ul.children.length - 1;
                    ul.style.left = -num * focusWidth + 'px';
                }
                num--;
                animate(ul, -num * focusWidth, function() {
                    flag = true; //打开节流阀
                });
                // 点击左侧按钮，小圆圈跟随一起变化 可以再声明一个变量控制小圆圈的播放
                circle--;
                // 如果circle < 0 说明第一张照片  则小圆圈要改为第7个小圆圈
                // if (circle < 0) {
                //     circle = b_ul.children.length - 1;
                // }
                circle = circle < 0 ? circle = b_ul.children.length - 1 : circle;
                // 调用排他思想函数
                circleChange();
            }
        });

        function circleChange() {
            // 先清除其余小圆圈的border类名
            for (var i = 0; i < b_ul.children.length; i++) {
                b_ul.children[i].className = '';
            }
            // 再留下当前的小圆圈的border类名
            b_ul.children[circle].className = 'border';
        }
        // 10. 自动播放轮播图 实际上就是给右侧点击事件添加了一个定时器，让他过一段时间点击一次
        var timer = setInterval(function() {
            // element.click() 手动点击事件
            r.click();
        }, 2000);
    }());


    // 左侧图片部分
    (function() {
        var ad = document.querySelector('.ad');
        var ad_r = ad.querySelector('.ad_r');
        var span = ad.querySelector('span');
        // 鼠标经过显示
        ad.addEventListener('mouseenter', function() {
            ad_r.style.display = 'block';
            span.style.display = 'block';
        })

        // 鼠标离开隐藏
        ad.addEventListener('mouseleave', function() {
            ad_r.style.display = 'none';
            span.style.display = 'none';
        })

        // 点击隐藏
        span.addEventListener('click', function() {
            ad_r.style.display = 'none';
            span.style.display = 'none';
        })
    }());

    $(function() {
        // 电梯导航模块
        // 分析：
        // 1. 当我们滚到今日推荐模块，就让电梯导航淡出
        // 2. 点击电梯导航页面可以滚动到相应内容区域
        // 3. 核心算法：因为电梯导航模块和内容区模块一一对应
        // 4. 当我们点击电梯导航某个小模块，就可以拿到当前小模块的索引号
        // 5. 就可以把animate要移动的距离求出来：当前索引号内容区模块它的offset().top
        // 6. 点击之后，就让当前的小li添加current 类名，兄弟移除current 类名
        // 7. 当我们页面滚动到内容区域某个模块，左侧电梯导航相对应的小li也会添加current类，兄弟移除current类
        // 8. 触发的事件是页面滚动，因此这个功能要写到页面滚动事件里面
        // 9. 需要用到each()方法，遍历内容区域大模块
        // 10. 判断条件：被卷去的头部大于等于内容区域里面每一个模块的offset().top
        // 显示隐藏电梯导航
        var toolTop = $(".recom").offset().top;
        var floorTop = $(".floor").offset().top;
        toggleTool()

        // 因为页面滚区域动或者在滚动到区域后刷新都会显示，所以把显示隐藏封装成函数
        function toggleTool() {
            if ($(document).scrollTop() >= toolTop) {
                $(".c_nav").fadeIn();
                // 显示隐藏返回顶部
                if ($(document).scrollTop() > (floorTop - 1)) {
                    $(".c_nav_a").fadeIn();
                } else {
                    $(".c_nav_a").fadeOut();
                }
                // 页面滚动到某个内容区域，左侧电梯导航里相应的小li添加current类，其余的删除current类
                $(".floor .w").each(function(i, ele) {
                    if ($(document).scrollTop() >= $(ele).offset().top) {
                        // 利用索引号找到相应的电梯导航里的小li添加类
                        $(".c_nav_ul li").eq(i).addClass("current").siblings().removeClass("current");
                    }
                })
            } else {
                $(".c_nav").fadeOut();
            }
        }
        // 页面滚动事件
        $(window).scroll(function() {
            // 调用显示隐藏函数
            toggleTool();
            if (flag) {
                // 页面滚动到某个内容区域，左侧电梯导航里相应的小li添加current类，其余的删除current类
                $(".floor .w").each(function(i, ele) {
                    if ($(document).scrollTop() >= $(ele).offset().top) {
                        // 利用索引号找到相应的电梯导航里的小li添加类
                        $(".c_nav_ul li").eq(i).addClass("current").siblings().removeClass("current");
                    }
                })
            }
        });
        // 点击电梯导航里面的小li，就滚动到与其对应的内容区
        $(".c_nav_ul li").click(function() {
            flag = false;
            // 当我们每次点击小li 就需要计算出页面要去往的位置
            // 选出对应索引号的内容区的盒子  计算它的offset().top
            var current = $(".floor .w").eq($(this).index()).offset().top;
            $("body,html").stop().animate({
                scrollTop: current
            }, function() {
                flag = true;
            });
            // 点击之后，就让当前的小li添加current 类名，兄弟移除current 类名
            $(this).addClass("current").siblings().removeClass("current");
        });
        // 点击返回顶部
        $(".c_nav_a").click(function() {
                flag = false;
                $("body,html").stop().animate({
                    scrollTop: 0
                }, function() {
                    flag = true;
                });
            })
            // 当我们点击电梯导航里面的小li时，页面会触发滚动事件，从而出现了小li依次添加删除current类的Bug
            // 为了解决这个Bug  我们使用节流阀控制页面滚动时是否添加current类
            // 当我们点击后关闭节流阀，不让滚动事件添加current类；当点击事件里面的动画完成后，再利用回调函数打开节流阀
            // 返回顶部也是同理
        var flag = true;
    });

    // 新闻内容
    (function() {
        var lifeservice_is = this.document.querySelectorAll('.lifeservice_i');
        var s = [];
        for (var i = 0; i < 3; i++) {
            var y = -9 - i * 46;
            for (var j = 0; j < 4; j++) {
                var x = -2 - j * 45;
                s[s.length] = x + 'px ' + y + 'px';
            }
        }
        for (var i = 0; i < lifeservice_is.length; i++) {
            lifeservice_is[i].style.backgroundPosition = s[i];
        }
    }());
})